<template>
	<view class="goods-detail-page">
		<view class="goods-detail-swiper" v-if="goodsAttr.advList&&goodsAttr.advList.length>0">
			<u-swiper :list="goodsAttr.advList" height="750" img-mode="aspectFit" mode="number" indicator-pos="bottomRight"></u-swiper>
		</view>
		<!-- <view class="goods-activity-tips">1月29日限时抢购 还剩余<text>02</text>天<text>02</text>时<text>02</text>分<text>02</text>秒</view> -->
		<view class="goods-content">
			<view class="goods-price-box">
				<price :price="goodsDetail.goodsPrice" :taxPrice="goodsDetail.goodsCostPrice" size="large" />
				<!-- <view class="add-cart-btn">加入购物车</view> -->
				<add-cart type="2" :goods="goodsDetail" />
			</view>
			<view class="goods-name">
				<text class="prescript" v-if="goodsDetail.isPrescription==='是'">处方药</text>{{goodsDetail.goodsName}}
			</view>
			<view class="indication">{{goodsAttr.attendingFunction}}</view>
			<view class="company">{{goodsDetail.brandName}}</view>
		</view>
		<view class="goods-activity-box">
			<coupon-info v-if="goodsDetail.couponList && goodsDetail.couponList.length>0" :couponList="goodsDetail.couponList" :goodsId="goodsDetail.goodsId" />
			<!-- <view class="goods-activity-tab">
				<view class="activity-left">领劵</view>
				<view class="activity-tab-center coupon-tab">
					<view class="activity-coupon"><view class="coupon">满9999元减99</view></view>
					<view class="activity-coupon"><view class="coupon">满99元减9</view></view>
				</view>
				<view class="activity-right"><u-icon size="28" color="#999" name="arrow-right" class="activity-right-icon"></u-icon></view>
			</view> -->
			<act-info v-if="goodsDetail.activityList && goodsDetail.activityList.length>0" :activity="goodsDetail.activityList[0]" />
			<!-- <view class="goods-activity-tab">
				<view class="activity-left">其他促销</view>
				<view class="activity-tab-center other-tab">
					<view class="activity-type activity-other-type">换购</view>
					<view class="activity-text activity-other-text">满99元减9</view>
				</view>
				<view class="activity-right"><u-icon size="28" color="#999" name="arrow-right" class="activity-right-icon"></u-icon></view>
			</view> -->
		</view>
		<view class="prescript-tips" v-if="goodsDetail.isPrescription==='是'">
			<view class="prescript-title">处方药购买须知</view>
			<view class="prescript-content">本药品为处方药，用户需提供有效的处方，并由药房药师审核处方，审核合格后方可购买</view>
		</view>
		<collocation />
		<illustrate :goodsAttr="goodsAttr" :goodsDetail="goodsDetail"/>
		<cart />
		
	</view>
	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import addCart from '@/components/goods/addCart.vue'
	import price from '@/components/goods/price.vue'
	import Img from '@/components/goods/img.vue'
	import actInfo from './components/actInfo.vue'
	import couponInfo from './components/couponInfo.vue'
	import cart from "@/components/cart/cart.vue"
	import collocation from './components/collocation.vue'
	import illustrate from './components/illustrate.vue'
	export default {
		components:{ addCart,Img, price, cart, actInfo, collocation, illustrate, couponInfo},
		data() {
			return {
				actShow:false,
				id:'',
				title: 'Hello',
				background: {
					backgroundColor: '#0D95FF',
				},
				time:50,
				activeTab:0,
				goodsBoxCanScroll:0,
				barNum:'0%',
			}
		},
		computed:{
			...mapState({
				goodsDetail: state => state.goods.goodsDetail,
				goodsAttr: state => state.goods.goodsAttr,
				goodsCollocation: state => state.goods.goodsCollocation,
				loadingStatus: state => state.shop.loadingStatus
			})
		},
		onLoad(option) {
			this.id  = option.id
			this.getGoodsDetail()
			this.getGoodsCollocation()
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			// this.init()
		},
		methods: {
			...mapActions(['ActGetGoodsDetail','ActGetGoodsAttr','ActGetGoodsCollocation']),
			async getGoodsDetail(){
				await this.ActGetGoodsDetail({goodsId:this.id})
				if (this.goodsDetail&&this.goodsDetail.goodsPlatformId) {
					this.getGoodsAttr(this.goodsDetail.goodsPlatformId)
				}
			},
			async getGoodsAttr(goodsPlatformId){
				await this.ActGetGoodsAttr({goodsPlatformId:goodsPlatformId})
			},
			async getGoodsCollocation(){
				await this.ActGetGoodsCollocation({storeId:uni.getStorageSync('storeId'),current:1,size:10})
			},
			changeActiveTab(index){
				if (this.activeTab!==index) {
					this.activeTab=index
				}
			},
			myFunction(e){
				this.barNum = Math.floor(e.detail.scrollLeft)*56/Math.floor(this.goodsBoxCanScroll)
			},
			onPulling(e) {
			},
			init(){
				this.$nextTick(()=>{
					const query = uni.createSelectorQuery().in(this);
					let outWidth = 0
					query.select('#goodsScrollId').boundingClientRect(data => {
					  outWidth = Math.floor(data.width)
					}).exec();
					query.select('#firstGoods').boundingClientRect(data => {
					  let goodsSumWidth = Math.floor(data.width * this.goodsCollocation.length)
					  if (goodsSumWidth>outWidth){
						  this.goodsBoxCanScroll = goodsSumWidth - outWidth
					  }else{
						  this.goodsBoxCanScroll = 0
					  }
					}).exec();
				})
				
			},
			goPdf(){
				let _this = this
				uni.downloadFile({
				  url: 'https://f2bminio.gyao511.com/f2b/agreement/attachment/%E5%9B%9B%E7%8E%AF%E7%A7%91%E5%AE%9D-%E5%B0%BC%E5%8F%AF%E5%9C%B0%E5%B0%942021%E5%B9%B4%E5%B9%B4%E5%BA%A6%E5%8D%8F%E8%AE%AE%EF%BC%88%E5%9B%BD%E6%8E%A7%E5%86%85%E8%92%99%E5%8F%A4%EF%BC%89.pdf',
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				      },
					  fail:function(){
						  _this.$u.toast('打开文件失败')
					  }
				    });
				  }
				});
			}
		},
		
		watch:{
			// 'goodsCollocation.length'(){
			// 	this.init()
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.hidden-1{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.goods-detail-page{
		background-color: $u-bg-color;
		padding-bottom: 280rpx;
		.goods-content{
			padding:24rpx;
			background-color: #fff;
			margin-bottom: 16rpx;
			.goods-price-box{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.now-price{
				color: $u-type-error;
				font-size: 38rpx;
				font-weight: 700;
				display: inline-block;
				vertical-align: top;
				line-height: 62rpx;
				.money-icon{
					font-size: 26rpx;
				}
			}
			.before-price{
				color:$u-tips-color;
				font-size: 32rpx;
				margin-left:14rpx;
				text-decoration:line-through;
				position: relative;
				top:12rpx;
				display: inline-block;
				vertical-align: top;
			}
			.add-cart-btn{
				position: absolute;
				right:0;
				top:-4rpx;
				padding:16rpx 24rpx;
				background-color: $u-type-primary;
				color:#fff;
				border-radius: 124rpx;
				font-size: 28rpx;
			}
			.goods-name{
				font-size: 28rpx;
				color:$u-main-color;
				margin-top: 24rpx;
				font-weight: 700;
				line-height: 42rpx;
				margin-bottom: 16rpx;
				.prescript{
					border-radius: 4rpx;
					padding:4rpx 8rpx;
					background: linear-gradient(94.09deg, #3ADFB8 0%, #36D2CB 100%);
					color:#fff;
					font-size: 24rpx;
					margin-right:16rpx;
					font-weight: 400;
					line-height: 24rpx;
				}
			}
			.indication,.company{
				font-size: 24rpx;
				line-height: 34rpx;
				color:$u-content-color;
				margin-bottom: 16rpx;
			}
			.company{
				margin-bottom: 0;
			}
		}
		.goods-activity-box{
			margin-bottom: 16rpx;
			font-size: 24rpx;
			background-color: #fff;
			.goods-activity-tab{
				display: flex;
				justify-content: space-between;
				height:88rpx;
				align-items: center;
				padding:0 24rpx;
				.activity-left{
					width:104rpx;
					text-align: justify;
					text-align-last: justify;
					margin-right: 24rpx;
					color:$u-main-color;
					font-weight: 700;
				}
				.activity-tab-center{
					flex: 1;
					overflow: hidden;
					.activity-coupon{
						display: inline-block;
						vertical-align: middle;
						text-align: center;
						margin-right:16rpx;
						overflow: hidden;
						position: relative;
						.coupon{
							height:32rpx;
							padding:0 12rpx;
							text-align: center;
							line-height: 30rpx;
							font-size: 24rpx;
							color:$u-type-error;
							overflow: hidden;
							position: relative;
							border: 2rpx solid $u-type-error;
						}
						&:before,&:after{
							content: '';
							position: absolute;
							background-color: #fff;
							border-radius: 50%;
							display: block;
							width:8rpx;
							height:8rpx;
							top:10rpx;
							border: 2rpx solid $u-type-error;
							z-index: 99;
						}
						&:before{
							left:-4rpx;
						}
						&:after{
							right:-4rpx;
						}
					}
					.activity-type{
						background: linear-gradient(115.04deg, #F16500 0%, #FF0000 100%);
						height:32rpx;
						line-height: 32rpx;
						border-radius: 4rpx;
						color:#fff;
						margin-right:16rpx;
						padding:0 8rpx;
					}
					.activity-text{
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.sales-tab{
					display: flex;
				}
				.other-tab{
					display: flex;
				}
			}
		}
	}
	.goods-activity-tips{
		height:80rpx;
		background-color: $u-type-error;
		font-size: 24rpx;
		padding-left: 24rpx;
		color:#fff;
		line-height: 80rpx;
		text{
			display: inline-block;
			margin:0 4rpx;
			height:32rpx;
			background-color: #fff;
			border-radius: 4rpx;
			// width:32rpx;
			min-width: 32rpx;
			padding:0 2rpx;
			color:$u-type-error;
			vertical-align: middle;
			line-height:32rpx;
			text-align: center;
		}
	}
	.prescript-tips{
		background-color: #fff;
		margin-bottom: 16rpx;
		padding:24rpx;
		.prescript-title{
			font-size: 28rpx;
			color:$u-main-color;
			font-weight: 700;
			margin-bottom: 16rpx;
		}
		.prescript-content{
			font-size: 24rpx;
			color:$u-content-color;
			line-height: 36rpx;
		}
	}
	
	.illustrate{
		background-color: #fff;
		.illustrate-tab{
			display: flex;
			height:88rpx;
			align-items: center;
			border-bottom:1rpx solid $u-border-color;
			.tab-item{
				flex:1;
				text-align: center;
				height:100%;
				line-height: 88rpx;
			}
			.active{
				color:$u-type-primary;
				position: relative;
				&:after{
					content: '';
					display: block;
					width:60rpx;
					height:4rpx;
					background-color:$u-type-primary;
					position: absolute;
					bottom:0;
					left:50%;
					margin-left:-30rpx;
				}
			}
		}
		.illustrate-content{
			padding:24rpx;
			.content-border{
				border-top:2rpx solid $u-border-color;
				border-left:2rpx solid $u-border-color;
				.illustrate-item{
					display: flex;
					font-size: 24rpx;
					.illustrate-label{
						width:180rpx;
						padding:14rpx;
						border-bottom:2rpx solid $u-border-color;
						border-right:2rpx solid $u-border-color;
						color:$u-content-color;
						line-height: 36rpx;
					}
					.illustrate-value{
						flex:1;
						padding:14rpx;
						border-bottom:2rpx solid $u-border-color;
						border-right:2rpx solid $u-border-color;
						color:$u-main-color;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>
